<template>
	<el-dialog :title="dialogTitle" v-model="visible" :width="1200" :zIndex="999" destroy-on-close @closed="$emit('closed')"
			   top="0">
		<el-form :model="form" :rules="rules" :disabled="mode==='show'" :ref="setRefs('dialogForm')" label-width="100px" label-position="left">
			<el-row>
				<el-col :span="12">
					<el-form-item label="限购名称" prop="name">
						<el-input v-model="form.name" placeholder="" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="1"></el-col>
				<el-col :span="11">
					<el-form-item label="限购类型" prop="limit_type">
						<el-select v-model="form.limit_type" placeholder="请选择">
							<el-option v-for="(item,k) in limitTypeOptions" :key="k" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="开始时间" prop="start_time">
						<el-date-picker v-model="form.start_time" type="datetime" placeholder="选择日期时间" value-format="YYYY-MM-DD HH:mm:ss"
										format="YYYY-MM-DD HH:mm:ss" clearable></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="1"></el-col>
				<el-col :span="11">
					<el-form-item label="结束时间" prop="end_time">
						<el-date-picker v-model="form.end_time" type="datetime" placeholder="选择日期时间" value-format="YYYY-MM-DD HH:mm:ss"
										format="YYYY-MM-DD HH:mm:ss" clearable></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="商品规则" prop="is_all_goods">
						<el-radio-group v-model="form.is_all_goods">
							<el-radio :label="1">全部</el-radio>
							<el-radio :label="-1">按商品IDS</el-radio>
							<el-radio :label="-2">按分类IDS</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="1"></el-col>
				<el-col :span="11">
					<el-form-item label="状态" prop="status">
						<el-radio-group v-model="form.status">
							<el-radio :label="1">启用</el-radio>
							<el-radio :label="0">禁用</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="24" v-if="form.is_all_goods === -1">
					<el-form-item label="商品IDS" prop="goods_ids">
						<el-input v-model="form.goods_ids" placeholder="格式 ,1,2,3," clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24" v-if="form.is_all_goods === -2">
					<el-form-item label="分类IDS" prop="category_ids">
						<el-input v-model="form.category_ids" placeholder="格式 ,1,2,3," clearable></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<el-button @click="visible=false" >取 消</el-button>
			<el-button v-if="mode!=='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script setup>
import { ref, reactive,defineExpose,defineEmits,computed } from 'vue'
import to from 'await-to-js'
import { useRefs } from "@/utils/useRefs";
import api from '@/api'
import { ElMessage } from "element-plus";
import dayjs from "dayjs";

const { refs, setRefs } = useRefs()

const limitTypeOptions = reactive([
	{
		label: "地址限购",
		value: 1
	}
])

const titleMap = {
	'add': '新增',
	'edit': '编辑',
	'show': '查看'
}
let mode = 'add'
const visible = ref(false)
const isSaveing = ref(false)
const dialogTitle = ref('')

const form = ref({
	id: 0,
	name: '',
	limit_type: 1,
	is_all_goods: 1,
	status: 1,
	start_time: '',
	end_time: '',
	goods_ids: '',
	category_ids: '',
	member_ids: ''
})
const rules = ref({
	name: [
		{ required: true, message: '请输入名称', trigger: ['blur','change'] }
	],
	start_time: [
		{ required: true, message: '请选择开始时间', trigger: ['blur','change'] }
	],
	end_time: [
		{ required: true, message: '请选择结束时间', trigger: ['blur','change'] }
	],
})

const open = (_mode = 'add') => {
	mode = _mode
	dialogTitle.value = titleMap[mode] + '限购'
	visible.value = true
}
const edit = async (id) => {
	mode = 'edit'
	dialogTitle.value = titleMap[mode] + '限购'
	const [err, res] = await to(api.shop.goodsLimit.info({id}).then(res => res));
	console.log(res)
	if (err) {
		ElMessage.error(err.message)
		return
	}
	if (res.code !== 0) {
		ElMessage.error(res.message)
		return
	}
	let tmp = {}
	for(let key in form.value) {
		if (key === 'start_time') {
			tmp[key] = dayjs(res.data[key] * 1000).format('YYYY-MM-DD HH:mm:ss')
		} else if (key === 'end_time') {
			tmp[key] = dayjs(res.data[key] * 1000).format('YYYY-MM-DD HH:mm:ss')
		} else {
			tmp[key] = res.data[key]
		}
	}
	switch(tmp.is_all_goods) {
		case -1:
			tmp.goods_ids = res.data.goods_rules
			break;
		case -2:
			tmp.category_ids = res.data.goods_rules
			break;
		case -3:
			tmp.member_ids = res.data.goods_rules
			break;
	}
	console.log(tmp)
	form.value = tmp
	visible.value = true
}

defineExpose({
	open,
	edit
})
const emit = defineEmits(['success'])

const submit = async () => {
	isSaveing.value = true
	let [err, res] = await to(refs.value.dialogForm.validate())
	console.log(err, res)
	if (err) {
		isSaveing.value = false
		return
	}
	let method = mode === 'add' ? 'add' : 'update';
	let submitData = {
		...form.value
	}
	switch(submitData.is_all_goods) {
		case 1:
			submitData.goods_rules = ''
			break;
		case -1:
			submitData.goods_rules = submitData.goods_ids
			break;
		case -2:
			submitData.goods_rules = submitData.category_ids
			break;
		case -3:
			submitData.goods_rules = submitData.member_ids
			break;
	}

	delete submitData.goods_ids
	delete submitData.category_ids
	delete submitData.member_ids

	submitData.start_time = dayjs(submitData.start_time).unix();
	submitData.end_time = dayjs(submitData.end_time).unix();
	[err, res] = await to(api.shop.goodsLimit[method](submitData).then(res => res));
	console.log(err, res)
	if (err) {
		isSaveing.value = false
		return
	}

	if (res.code !== 0) {
		ElMessage.error(res.message)
		isSaveing.value = false
		return
	}
	emit('success')
	ElMessage.success('操作成功')
	isSaveing.value = false
	visible.value = false
}

</script>

<style scoped>

</style>
